import {
  getPickingTaskByReceived,
  getPickingTaskByNotReceived,
  workshopReception,
  workshopReception2,
  getPickingReceptionByPage,
} from '@/services/product/pickingReceive';
import { Ellipsis } from '@/components/Ellipsis';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Tree, Tabs } from 'antd';
import { sortTran, filterTran } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import type { tabType } from './components/interfaceProduct';
import PickingReceive_sublist from './pickingReceive_sublist';
import { PageHeaderWrapper } from '@ant-design/pro-components';
import { SearchOutlined } from '@ant-design/icons';
import '@/pages/product/product.module.less';
import { SearchProps } from 'antd/lib/input';
const pickingDetail: React.FC<{}> = () => {
  const actionRef1 = useRef<ActionType>();
  const actionRef2 = useRef<ActionType>();
  const actionRef3 = useRef<ActionType>();
  const [pickingTaskCode, setPickingTaskCode] = useState();
  const [tabState, setTabState] = useState('');
  const [pickingTaskId, setPickingTaskId] = useState();
  const detailRef = useRef(null);
  const detailRefs = useRef(null);
  const ref = useRef(null);
  const { Search } = Input;
  const onSearch: SearchProps['onSearch'] = (info) => {
    setPickingTaskId(info);
    setPickingTaskCode(undefined);
    actionRef1.current!.reload();
  };
  // 未接受
  const picknotreccieve: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',

      width: 80,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',
      align: 'center',
      sorter: true,
    },
    {
      title: '项目编号',
      dataIndex: 'projectCode',
      align: 'center',
      sorter: true,
    },
    // {
    //   title: '当前批次',
    //   dataIndex: 'currentBatchCode',
    // },
    {
      title: '工单编号',
      dataIndex: 'wo',

      align: 'center',
      sorter: true,
      search: false,
    },
    {
      title: '柜体编号',
      dataIndex: 'productCode',
      align: 'center',
      sorter: true,
      width: 200,
      search: false,
    },
    {
      title: '物料接收任务编号',
      dataIndex: 'pickingTaskCode',
      align: 'center',
      sorter: true,

      search: false,
    },
    {
      title: '分料完成日期',
      dataIndex: 'pickingFinishTime',
      search: false,

      align: 'center',
      sorter: true,
    },
    {
      title: '状态',
      dataIndex: 'pickingState',
      render: (text) => <>{text === '车间接收' ? '已接收' : '未接收'}</>,
      search: false,
      width: 80,
      align: 'center',
      sorter: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      width: 110,
      align: 'center',
      render: (text, record, _, action) => [
        <a
          key="receivekey"
          onClick={async () => {
            const receive_result = await workshopReception({ id: record.id });
            if (receive_result != null) {
              message.success('接收成功');
              actionRef1.current?.reload();
              actionRef2.current?.reload();
            }
          }}
        >
          车间接收
        </a>,
      ],
    },
  ];

  // 已接受
  const pickreccieve: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',

      width: 80,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',

      align: 'center',
      sorter: true,
    },
    {
      title: '项目编号',
      dataIndex: 'projectCode',

      align: 'center',
      sorter: true,
    },
    // {
    //   title: '当前批次',
    //   dataIndex: 'currentBatchCode',
    // },
    {
      title: '工单编号',
      dataIndex: 'wo',
      align: 'center',
      sorter: true,

      search: false,
    },
    {
      title: '柜体编号',
      dataIndex: 'productCode',
      width: 100,
      align: 'center',
      sorter: true,
      search: false,
    },
    {
      title: '分料完成日期',
      dataIndex: 'pickingFinishTime',

      search: false,
      align: 'center',
      sorter: true,
    },
    {
      title: '状态',
      dataIndex: 'pickingState',

      render: (text) => <>{text === '车间接收' ? '已接收' : '未接收'}</>,
      search: false,
      width: 80,
      align: 'center',
      sorter: true,
    },
  ];

  // 已完成
  const pickReception: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',

      width: 80,
    },
    {
      title: '项目名称',
      dataIndex: 'projectName',

      align: 'center',
      sorter: true,
    },
    {
      title: '项目编号',
      dataIndex: 'projectCode',

      align: 'center',
      sorter: true,
      render: (text, record) => <>{record.productCode ? record.productCode.split('.')[0] : ''}</>
    },
    // {
    //   title: '当前批次',
    //   dataIndex: 'currentBatchCode',
    // },
    {
      title: '工单编号',
      dataIndex: 'wo',
      align: 'center',
      sorter: true,

      search: false,
    },
    {
      title: '柜体编号',
      dataIndex: 'productCode',

      align: 'center',
      sorter: true,
      search: false,
    },
    {
      title: '分料完成日期',
      dataIndex: 'pickingFinishTime',

      search: false,
      align: 'center',
      sorter: true,
    },
    {
      title: '状态',
      dataIndex: 'pickingState',

      render: (text) => <div>已完成</div>,
      search: false,
      width: 80,
      align: 'center',
      sorter: true,
    },
  ];


  //定义Tabs的子结构的数组
  const tabList: tabType[] = [
    {
      name: 'tab1',
      label: '未接收',
      content: (
        <>
          <ProTable
            onRow={(record) => ({
              onClick: async (a) => {
                setPickingTaskCode(record.pickingTaskCode);
                //样视设置
                a.stopPropagation();
                let s = a.target.parentNode.parentNode.childNodes;
                console.log(s, 's');
                // 先重置为默认样式
                for (var i = 0; i < s.length; i++) {
                  s[i].style.color = '#000000d9';
                  s[i].style.fontWeight = 'normal';
                  s[i].style.backgroundColor = '#fff';
                }
                // 再设置高亮样式
                a.target.parentNode.style.color = '#13C2C2';
                a.target.parentNode.style.fontWeight = 'bold';
                a.target.parentNode.style.backgroundColor = '#e6fffb'
              },
            })}
            actionRef={actionRef1} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            formRef={ref}
            search={{
              labelWidth: 'auto',
              defaultCollapsed: true,
            }}
            request={async (params = {}, sort, filter) => {
              const paramsFilter = { ...params, wo: pickingTaskId };
              const sorters = sortTran(sort);
              const filters = filterTran(paramsFilter);
              const result = await getPickingTaskByNotReceived({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              console.log(result);
              return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
              };
            }}
            // toolBarRender={(action, { selectedRows }) => [
            //   <div className="pickingReceiveSearch">
            //     <Input></Input>
            //   </div>,
            // ]}
            toolbar={{
              search: (
                <div className="pickingReceiveSearch">
                  <Search
                    addonBefore={<SearchOutlined />}
                    placeholder="请输入工单编号"
                    allowClear
                    enterButton="筛选工单"
                    onSearch={onSearch}
                  />
                </div>
              ),
            }}
            columns={picknotreccieve}
            scroll={{ x: 1450, y: 350 }}
            rowSelection={{}}
            size="large"
          />
          <PickingReceive_sublist pickingTaskCode={pickingTaskCode} ref={detailRefs} tabState={tabState} />
        </>
      ),
    },
    {
      name: 'tab2',
      label: '已接收',
      content: (
        <>
          <ProTable
            onRow={(record) => ({
              onClick: async (a) => {
                setPickingTaskCode(record.pickingTaskCode);
                a.stopPropagation();
                let s = a.target.parentNode.parentNode.childNodes;
                console.log(s, 's');
                // 先重置为默认样式
                for (var i = 0; i < s.length; i++) {
                  s[i].style.color = '#000000d9';
                  s[i].style.fontWeight = 'normal';
                  s[i].style.backgroundColor = '#fff';
                }
                // 再设置高亮样式
                a.target.parentNode.style.color = '#13C2C2';
                a.target.parentNode.style.fontWeight = 'bold';
                a.target.parentNode.style.backgroundColor = '#e6fffb'
              },
            })}
            // headerTitle="已接受信息查询"
            actionRef={actionRef2} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            formRef={ref}
            search={{
              labelWidth: 'auto',
              defaultCollapsed: true,
            }}
            request={async (params = {}, sort, filter) => {
              const sorters = sortTran(sort);
              const filters = filterTran(params);
              const result = await getPickingTaskByReceived({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              console.log(result);
              return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
              };
            }}
            toolbar={{
              search: (
                <div className="pickingReceiveSearch">
                  <Search
                    addonBefore={<SearchOutlined />}
                    placeholder="请输入工单编号"
                    allowClear
                    enterButton="筛选工单"
                    onSearch={onSearch}
                  />
                </div>
              ),
            }}
            columns={pickreccieve}
            scroll={{ x: 1200, y: 350 }}
            rowSelection={{}}
            size="large"
          />
          <PickingReceive_sublist pickingTaskCode={pickingTaskCode} ref={detailRef} tabState={tabState} />
        </>
      ),
    },
    {
      name: 'tab3',
      label: '已完成',
      content: (
        <>
          <ProTable
            onRow={(record) => ({
              onClick: async (a) => {
                setPickingTaskCode(record.pickingTaskCode);
                a.stopPropagation();
                let s = a.target.parentNode.parentNode.childNodes;
                console.log(s, 's');
                // 先重置为默认样式
                for (var i = 0; i < s.length; i++) {
                  s[i].style.color = '#000000d9';
                  s[i].style.fontWeight = 'normal';
                  s[i].style.backgroundColor = '#fff';
                }
                // 再设置高亮样式
                a.target.parentNode.style.color = '#13C2C2';
                a.target.parentNode.style.fontWeight = 'bold';
                a.target.parentNode.style.backgroundColor = '#e6fffb'
              },
            })}
            // headerTitle="已接受信息查询"
            actionRef={actionRef3} //用于触发刷新操作等，看api
            rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
            formRef={ref}
            search={{
              labelWidth: 'auto',
              defaultCollapsed: true,
            }}
            request={async (params = {}, sort, filter) => {
              const sorters = sortTran(sort);
              const filters = filterTran(params);
              const result = await getPickingReceptionByPage({
                ...params,
                sorters: sorters,
                filters: filters,
              });
              console.log(result);
              return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
              };
            }}
            toolbar={{
              search: (
                <div className="pickingReceiveSearch">
                  <Search
                    addonBefore={<SearchOutlined />}
                    placeholder="请输入工单编号"
                    allowClear
                    enterButton="筛选工单"
                    onSearch={onSearch}
                  />
                </div>
              ),
            }}
            columns={pickReception}
            scroll={{ x: 1200, y: 350 }}
            rowSelection={{}}
            size="large"
          />
          <PickingReceive_sublist pickingTaskCode={pickingTaskCode} ref={detailRef} tabState={tabState} />
        </>
      ),
    },
  ];

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <Tabs
        type="card"
        animated={true}
        destroyInactiveTabPane={true}
        onChange={(value) => {
          setTabState(value);
          setPickingTaskCode(undefined);
        }}
        items={tabList.map((item, i) => {
          const id = String(i + 1);
          return {
            label: item.label,
            key: id,
            children: <div>{item.content}</div>,
          };
        })}
      />
    </PageHeaderWrapper>
  );
};
export default pickingDetail;
